﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true" CodeBehind="ModalPopup.aspx.cs" Inherits="Samples.Views.Samples.ModalPopup" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <div class="demoarea">
        <div class="demoheading">ModalPopup</div>
    
    
        <p id="Paragraph1">ASP.NET AJAX is a free framework for building a new generation of richer, more interactive, highly personalized cross-browser web applications.  This new web development technology from Microsoft integrates cross-browser client script libraries with the ASP.NET 2.0 server-based development framework.  In addition, ASP.NET AJAX offers you the same type of development platform for client-based web pages that ASP.NET offers for server-based pages.  And because ASP.NET AJAX is an extension of ASP.NET, it is fully integrated with server-based services. ASP.NET AJAX makes it possible to easily take advantage of AJAX techniques on the web and enables you to create ASP.NET pages with a rich, responsive UI and server communication.  However, AJAX isn't just for ASP.NET.  You can take advantage of the rich client framework to easily build client-centric web applications that integrate with any backend data provider and run on most modern browsers.  </p><br />
        <a id="Link1" href="javascript:void(0)">Click here to change the paragraph style</a>
        
        <div id="Panel1" class="modalPopup" style="display: none;">
            <div id="Panel3" style="cursor: move;background-color:#DDDDDD;border:solid 1px Gray;color:Black"><p>Choose the paragraph style you would like:</p></div>
            <div>
                <p>
                    <input type="radio" name="Radio" id="RadioA" checked="checked" onclick="styleToSelect = 'sampleStyleA';" />
                    <label for="RadioA" class="sampleStyleA" style="padding: 3px;">Sample paragraph text</label>
                </p>
                <p>
                    <input type="radio" name="Radio" id="RadioB" onclick="styleToSelect = 'sampleStyleB';" />
                    <label for="RadioB" class="sampleStyleB" style="padding: 3px;">Sample paragraph text</label>
                </p>
                <p>
                    <input type="radio" name="Radio" id="RadioC" onclick="styleToSelect = 'sampleStyleC';" />
                    <label for="RadioC" class="sampleStyleC" style="padding: 3px;">Sample paragraph text</label>
                </p>
                <p>
                    <input type="radio" name="Radio" id="RadioD" onclick="styleToSelect = 'sampleStyleD';" />
                    <label for="RadioD" class="sampleStyleD" style="padding: 3px;">Sample paragraph text</label>
                </p>
                <p style="text-align: center;">
                    <input type="submit" name="OkButton" value="OK" id="OkButton" />
                    <input type="submit" name="CancelButton" value="Cancel" id="CancelButton" />
                </p>
            </div>
        </div>
    </div>
    
    <script type="text/javascript" language="javascript">
    //<![CDATA[
        var styleToSelect;
    
        function onOk() {
            $get('Paragraph1').className = styleToSelect;
        }
    //]]>
    </script>
    
    <%= Ajax.ModalPopup("Link1", "Panel1", "", true, "OkButton", "CancelButton", "onOk();", "", "Panel3")%>
</asp:Content>
